<template>
  <div class="medical-records">
    <el-card>
      <div class="records-title">就诊病例</div>
      <el-table :data="pagedRecords" style="width: 100%" v-loading="loading">
        <el-table-column prop="title" label="病例标题" min-width="160" />
        <el-table-column prop="visitDate" label="就诊时间" min-width="120" />
        <el-table-column prop="doctor" label="主治医生" min-width="100" />
        <el-table-column prop="diagnosis" label="诊断结果" min-width="180" />
        <el-table-column label="操作" min-width="100">
          <template #default="scope">
            <el-button size="small" @click="showDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="records.length"
          layout="prev, pager, next, jumper, ->, total"
          @current-change="handlePageChange"
        />
      </div>
      <el-dialog v-model="showDialog" title="病例详情" width="600px" center>
        <div v-if="currentRecord">
          <div class="detail-item"><b>病例标题：</b>{{ currentRecord.title }}</div>
          <div class="detail-item"><b>就诊时间：</b>{{ currentRecord.visitDate }}</div>
          <div class="detail-item"><b>主治医生：</b>{{ currentRecord.doctor }}</div>
          <div class="detail-item"><b>诊断结果：</b>{{ currentRecord.diagnosis }}</div>
          <div class="detail-item"><b>详细描述：</b>{{ currentRecord.description }}</div>
        </div>
        <template #footer>
          <el-button @click="showDialog = false">关闭</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const loading = ref(false)
const records = ref([
  { id: 1, title: '高血压复诊', visitDate: '2023-10-01', doctor: '李医生', diagnosis: '血压控制良好', description: '患者血压平稳，建议继续服药并定期复查。' },
  { id: 2, title: '糖尿病初诊', visitDate: '2023-09-15', doctor: '王医生', diagnosis: '2型糖尿病', description: '建议控制饮食，规律运动，按时服药。' },
  { id: 3, title: '感冒就诊', visitDate: '2023-08-20', doctor: '张医生', diagnosis: '普通感冒', description: '多喝水，注意休息，必要时服用感冒药。' },
  { id: 4, title: '胃炎复查', visitDate: '2023-07-10', doctor: '刘医生', diagnosis: '慢性胃炎', description: '继续服药，避免辛辣刺激食物。' },
  { id: 5, title: '体检', visitDate: '2023-06-05', doctor: '陈医生', diagnosis: '健康', description: '体检结果正常，建议保持良好生活习惯。' },
  { id: 6, title: '骨折复查', visitDate: '2023-05-12', doctor: '林医生', diagnosis: '恢复良好', description: '骨折愈合良好，可适当增加活动量。' }
])
const currentPage = ref(1)
const pageSize = ref(5)
const showDialog = ref(false)
const currentRecord = ref<any>(null)
const pagedRecords = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return records.value.slice(start, start + pageSize.value)
})
function handlePageChange(page: number) {
  currentPage.value = page
}
function showDetail(record: any) {
  currentRecord.value = record
  showDialog.value = true
}
</script>
<style scoped>
.medical-records {
  max-width: 900px;
  margin: 40px auto;
}
.records-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1976d2;
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: 2px;
}
.pagination {
  margin: 24px 0 0 0;
  display: flex;
  justify-content: center;
}
.detail-item {
  margin-bottom: 12px;
  font-size: 1.08rem;
}
</style> 